<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <%include("./common/header.html"){}%>
    <script src="${ctxPath}/js/pages/dashboard.js"></script>
    <style>
        #user-chat-dialog img {
            width: 50px;
            height: 50px;
        }

        #user-chat-dialog .modal-title {
            display: inline-block;
        }

        #user-chat-dialog .modal-header {
            padding: 5px 15px;
        }
    </style>
    <title>作业审核管理系统-首页</title>
</head>
<body>
<!-- Preloader -->
<div id="preloader">
    <div id="status"><i class="fa fa-spinner fa-spin"></i></div>
</div>

<section>
    <%include("./common/left_nav.html"){}%>
    <div class="mainpanel">
        <%include("./common/top_nav.html"){}%>
        <div id="rightPanel">
            <div class="pageheader">
                <h2><i class="fa fa-home"></i>系统首页</h2>

                <div class="breadcrumb-wrapper">
                    <span class="label">You are here:</span>
                    <ol class="breadcrumb">
                        <li><a href="dashboard.html">Bracket</a></li>
                        <li class="active">Dashboard</li>
                    </ol>
                </div>
            </div>

            <div class="contentpanel">
                <div class="row">
                    <div class="col-sm-6 col-md-3">
                        <div class="panel panel-success panel-stat">
                            <div class="panel-heading">
                                <div class="stat">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <img src="${ctxPath}/images/is-user.png" alt=""/>
                                        </div>
                                        <div class="col-xs-8">
                                            <small class="stat-label">今日访问量</small>
                                            <h1>900k+</h1>
                                        </div>
                                    </div>
                                    <!-- row -->

                                    <div class="mb15"></div>

                                    <div class="row">
                                        <div class="col-xs-6">
                                            <small class="stat-label">页面/平均访问</small>
                                            <h4>7.80</h4>
                                        </div>

                                        <div class="col-xs-6">
                                            <small class="stat-label">新访问者占比</small>
                                            <h4>76.43%</h4>
                                        </div>
                                    </div>
                                    <!-- row -->
                                </div>
                                <!-- stat -->

                            </div>
                            <!-- panel-heading -->
                        </div>
                        <!-- panel -->
                    </div>
                    <!-- col-sm-6 -->

                    <div class="col-sm-6 col-md-3">
                        <div class="panel panel-danger panel-stat">
                            <div class="panel-heading">

                                <div class="stat">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <img src="${ctxPath}/images/is-document.png" alt=""/>
                                        </div>
                                        <div class="col-xs-8">
                                            <small class="stat-label">不同用户访问占比</small>
                                            <h1>54.40%</h1>
                                        </div>
                                    </div>
                                    <!-- row -->

                                    <div class="mb15"></div>

                                    <small class="stat-label">平均在线时长</small>
                                    <h4>01:80:22</h4>

                                </div>
                                <!-- stat -->

                            </div>
                            <!-- panel-heading -->
                        </div>
                        <!-- panel -->
                    </div>
                    <!-- col-sm-6 -->

                    <div class="col-sm-6 col-md-3">
                        <div class="panel panel-primary panel-stat">
                            <div class="panel-heading">

                                <div class="stat">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <img src="${ctxPath}/images/is-document.png" alt=""/>
                                        </div>
                                        <div class="col-xs-8">
                                            <small class="stat-label">页面访问量</small>
                                            <h1>300k+</h1>
                                        </div>
                                    </div>
                                    <!-- row -->

                                    <div class="mb15"></div>

                                    <small class="stat-label">% 活动量占比</small>
                                    <h4>34.23%</h4>

                                </div>
                                <!-- stat -->

                            </div>
                            <!-- panel-heading -->
                        </div>
                        <!-- panel -->
                    </div>
                    <!-- col-sm-6 -->

                    <div class="col-sm-6 col-md-3">
                        <div class="panel panel-dark panel-stat">
                            <div class="panel-heading">

                                <div class="stat">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <img src="${ctxPath}/images/is-money.png" alt=""/>
                                        </div>
                                        <div class="col-xs-8">
                                            <small class="stat-label">今日收益</small>
                                            <h1>$655</h1>
                                        </div>
                                    </div>
                                    <!-- row -->

                                    <div class="mb15"></div>

                                    <div class="row">
                                        <div class="col-xs-6">
                                            <small class="stat-label">上一周</small>
                                            <h4>$32,322</h4>
                                        </div>

                                        <div class="col-xs-6">
                                            <small class="stat-label">上一月</small>
                                            <h4>$503,000</h4>
                                        </div>
                                    </div>
                                    <!-- row -->

                                </div>
                                <!-- stat -->

                            </div>
                            <!-- panel-heading -->
                        </div>
                        <!-- panel -->
                    </div>
                    <!-- col-sm-6 -->
                </div>
                <!-- row -->

                <div class="row">
                    <div class="col-sm-8 col-md-9">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-8">
                                        <h5 class="subtitle mb5">Network Performance</h5>

                                        <p class="mb15">Duis autem vel eum iriure dolor in hendrerit in vulputate...</p>

                                        <div id="basicflot"
                                             style="width: 100%; height: 300px; margin-bottom: 20px"></div>
                                    </div>
                                    <!-- col-sm-8 -->
                                    <div class="col-sm-4">
                                        <h5 class="subtitle mb5">Server Status</h5>

                                        <p class="mb15">Summary of the status of your server.</p>

                                        <span class="sublabel">CPU Usage (40.05 - 32 cpus)</span>

                                        <div class="progress progress-sm">
                                            <div style="width: 40%" aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40"
                                                 role="progressbar" class="progress-bar progress-bar-primary"></div>
                                        </div>
                                        <!-- progress -->

                                        <span class="sublabel">Memory Usage (32.2%)</span>

                                        <div class="progress progress-sm">
                                            <div style="width: 32%" aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40"
                                                 role="progressbar" class="progress-bar progress-bar-success"></div>
                                        </div>
                                        <!-- progress -->

                                        <span class="sublabel">Disk Usage (82.2%)</span>

                                        <div class="progress progress-sm">
                                            <div style="width: 82%" aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40"
                                                 role="progressbar" class="progress-bar progress-bar-danger"></div>
                                        </div>
                                        <!-- progress -->

                                        <span class="sublabel">Databases (63/100)</span>

                                        <div class="progress progress-sm">
                                            <div style="width: 63%" aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40"
                                                 role="progressbar" class="progress-bar progress-bar-warning"></div>
                                        </div>
                                        <!-- progress -->

                                        <span class="sublabel">Domains (2/10)</span>

                                        <div class="progress progress-sm">
                                            <div style="width: 20%" aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40"
                                                 role="progressbar" class="progress-bar progress-bar-success"></div>
                                        </div>
                                        <!-- progress -->

                                        <span class="sublabel">Email Account (13/50)</span>

                                        <div class="progress progress-sm">
                                            <div style="width: 26%" aria-valuemax="100" aria-valuemin="0"
                                                 aria-valuenow="40"
                                                 role="progressbar" class="progress-bar progress-bar-success"></div>
                                        </div>
                                        <!-- progress -->


                                    </div>
                                    <!-- col-sm-4 -->
                                </div>
                                <!-- row -->
                            </div>
                            <!-- panel-body -->
                        </div>
                        <!-- panel -->
                    </div>
                    <!-- col-sm-9 -->

                    <div class="col-sm-4 col-md-3">

                        <div class="panel panel-default">
                            <div class="panel-body">
                                <h5 class="subtitle mb5">Most Browser Used</h5>

                                <p class="mb15">Duis autem vel eum iriure dolor in hendrerit in vulputate...</p>

                                <div id="donut-chart2" class="ex-donut-chart"></div>
                            </div>
                            <!-- panel-body -->
                        </div>
                        <!-- panel -->

                    </div>
                    <!-- col-sm-3 -->

                </div>
                <!-- row -->

                <div class="row">

                    <div class="col-sm-7">

                        <div class="table-responsive">
                            <table class="table table-bordered mb30">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <td>6</td>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                <tr>
                                    <td>7</td>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- table-responsive -->

                    </div>
                    <!-- col-sm-7 -->

                    <div class="col-sm-5">

                        <div class="panel panel-success">
                            <div class="panel-heading padding5">
                                <div id="line-chart" class="ex-line-chart"></div>
                            </div>
                            <div class="panel-body">
                                <div class="tinystat pull-left">
                                    <div id="sparkline" class="chart mt5"></div>
                                    <div class="datainfo">
                                        <span class="text-muted">Average Sales</span>
                                        <h4>$630,201</h4>
                                    </div>
                                </div>
                                <!-- tinystat -->
                                <div class="tinystat pull-right">
                                    <div id="sparkline2" class="chart mt5"></div>
                                    <div class="datainfo">
                                        <span class="text-muted">Total Sales</span>
                                        <h4>$139,201</h4>
                                    </div>
                                </div>
                                <!-- tinystat -->
                            </div>
                        </div>
                        <!-- panel -->

                    </div>
                    <!-- col-sm-6 -->
                </div>
                <!-- row -->

                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <div class="panel panel-default widget-photoday">
                            <div class="panel-body">
                                <a href="" class="photoday"><img src="${ctxPath}/images/photos/photo1.png" alt=""/></a>

                                <div class="photo-details">
                                    <h4 class="photo-title">Strawhat In The Beach</h4>
                                    <small class="text-muted"><i class="fa fa-map-marker"></i> San Franciso, California,
                                        USA
                                    </small>
                                    <small>By: <a href="">ThemePixels</a></small>
                                </div>
                                <!-- photo-details -->
                                <ul class="photo-meta">
                                    <li><span><i class="fa fa-eye"></i> 32,102</span></li>
                                    <li><a href="#"><i class="fa fa-heart"></i> 1,003</a></li>
                                    <li><a href="#"><i class="fa fa-comments"></i> 52</a></li>
                                </ul>
                            </div>
                            <!-- panel-body -->
                        </div>
                        <!-- panel -->
                    </div>
                    <!-- col-sm-6 -->

                    <div class="col-sm-6 col-md-4">
                        <div class="panel panel-default panel-alt widget-messaging">
                            <div class="panel-heading">
                                <div class="panel-btns">
                                    <a href="" class="panel-edit"><i class="fa fa-edit"></i></a>
                                </div>
                                <!-- panel-btns -->
                                <h3 class="panel-title">Messaging</h3>
                            </div>
                            <div class="panel-body">
                                <ul>
                                    <li>
                                        <small class="pull-right">Dec 10</small>
                                        <h4 class="sender">Jennier Lawrence</h4>
                                        <small>Lorem ipsum dolor sit amet...</small>
                                    </li>
                                    <li>
                                        <small class="pull-right">Dec 9</small>
                                        <h4 class="sender">Marsha Mellow</h4>
                                        <small>Lorem ipsum dolor sit amet...</small>
                                    </li>
                                    <li>
                                        <small class="pull-right">Dec 9</small>
                                        <h4 class="sender">Holly Golightly</h4>
                                        <small>Lorem ipsum dolor sit amet...</small>
                                    </li>
                                    <li>
                                        <small class="pull-right">Dec 10</small>
                                        <h4 class="sender">Jennier Lawrence</h4>
                                        <small>Lorem ipsum dolor sit amet...</small>
                                    </li>
                                    <li>
                                        <small class="pull-right">Dec 9</small>
                                        <h4 class="sender">Marsha Mellow</h4>
                                        <small>Lorem ipsum dolor sit amet...</small>
                                    </li>
                                </ul>
                            </div>
                            <!-- panel-body -->
                        </div>
                        <!-- panel -->
                    </div>
                    <!-- col-sm-6 -->

                    <div class="col-sm-6 col-md-4">
                        <div class="panel panel-dark panel-alt widget-quick-status-post">
                            <div class="panel-heading">
                                <div class="panel-btns">
                                    <a href="" class="panel-close">&times;</a>
                                    <a href="" class="minimize">&minus;</a>
                                </div>
                                <!-- panel-btns -->
                                <h3 class="panel-title">提交作业</h3>
                            </div>
                            <div class="panel-body">
                                <ul class="nav nav-tabs nav-justified">
                                    <li class="active"><a href="#post-status" data-toggle="tab"><i
                                            class="fa fa-pencil"></i>
                                        <strong>Status</strong></a></li>
                                    <li><a href="#post-photo" data-toggle="tab"><i class="fa fa-picture-o"></i> <strong>Photo</strong></a>
                                    </li>
                                    <li><a href="#post-checkin" data-toggle="tab"><i class="fa fa-map-marker"></i>
                                        <strong>Check-In</strong></a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div id="post-status" class="tab-pane active">
                                        <input type="text" class="form-control" placeholder="What's your status?"/>
                                    </div>
                                    <div id="post-photo" class="tab-pane">
                                        <input type="text" class="form-control" placeholder="Choose photo"/>
                                    </div>
                                    <div id="post-checkin" class="tab-pane">
                                        <input type="text" class="form-control" placeholder="Search location"/>
                                    </div>
                                    <button class="btn btn-primary btn-block mt10">Submit Post</button>
                                </div>
                                <!-- tab-content -->

                            </div>
                            <!-- panel-body -->
                        </div>
                        <!-- panel -->

                        <div class="mb20"></div>

                        <div class="row">
                            <div class="col-xs-6">
                                <div class="panel panel-warning panel-alt widget-today">
                                    <div class="panel-heading text-center">
                                        <i class="fa fa-calendar-o"></i>
                                    </div>
                                    <div class="panel-body text-center">
                                        <h3 class="today">Fri, Dec 13</h3>
                                    </div>
                                    <!-- panel-body -->
                                </div>
                                <!-- panel -->
                            </div>

                            <div class="col-xs-6">
                                <div class="panel panel-danger panel-alt widget-time">
                                    <div class="panel-heading text-center">
                                        <i class="glyphicon glyphicon-time"></i>
                                    </div>
                                    <div class="panel-body text-center">
                                        <h3 class="today">4:50AM PST</h3>
                                    </div>
                                    <!-- panel-body -->
                                </div>
                                <!-- panel -->
                            </div>
                        </div>
                    </div>
                    <!-- col-sm-6 -->

                </div>
            </div>
            <!-- contentpanel -->

        </div>
        <!-- mainpanel -->
    </div>
    <!--用户聊天窗口-->
    <div id="user-chat-dialog" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <img alt="" id="user-chat-dialog-title" src="" class="img-thumbnail">
                    <h4 class="modal-title" id="user-chat-dialog-name"></h4>
                </div>
                <div class="modal-body">
                    <div class="well"  id="user-chat-dialog-list">
                        <div class="media">
                            <a href="#" class="pull-left">
                                <img alt="" src="/HomeworkCenter/images/photos/userprofile.png" class="media-object img-rounded">
                            </a>
                            <div class="media-body">
                                <p class="text-primary">Zaham Sindilmaca</p>
                                <p class="email-summary"> Ut enidewr你访问hi额外位ojfireexercitation... </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <textarea id="user-chat-dialog-content" style="width: 100%;min-height: 70px;"></textarea>
                    <button type="submit"  id="user-chat-dialog-submit-btn" data-toggle="tooltip" class="btn btn-info">发送</button>
                    <button type="button"  id="user-chat-dialog-close-btn" class="btn btn-danger" data-dismiss="modal">关闭</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</section>
<script>
    $(function(){
        //用户对话列表双击事件
        $(".chatuserlist li").on("dblclick", function () {
            //初始化好友的列表信息
            $("#user-chat-dialog_title").attr("src", $(this).find("img").attr("src"));//好友头像
            $("#user-chat-dialog-name").html($(this).find("strong").html());//好友的姓名
            //弹出用户对话框
            $("#user-chat-dialog").modal("show");
            //隐藏用户的列表
            $("#chatview").trigger("click");
        });
        $("#user-chat-dialog-submit-btn").on("click", function () {
            var chatContentObj = $("#user-chat-dialog-content");
            var chatContent = $("#user-chat-dialog-content").val();
            if (chatContent == "") {
                $(this).tooltip({
                    title: "发送消息不能为空",
                    container: 'body',
                    placement: "top"
                });
            }else{
                $(this).tooltip('destroy');
                //调用后台发送消息的函数
                var params=new Object();
                params.username=$("#user-chat-dialog-name").text();
                params.message=chatContent
                $.post("./user_send_message.action",params,function(data){
                   //显示发送的消息内容
                   var chatMsgTemplate="<div class=\"media\">"+
                    "<a href=\"#\" class=\"pull-left\">"+
                    "<img alt=\"\" src=\""+$("#system-user-info").find("em").attr("src")+"\" class=\"media-object img-rounded\">"+
                    "</a>"+
                    "<div class=\"media-body\">"+
                    "<p class=\"text-primary\">"+$("#system-user-info").find("em").html()+"</p>"+
                    "<p class=\"email-summary\">"+chatContent+"</p>"+
                    "</div>"+
                    "</div>";
                    $("#user-chat-dialog-list").after(chatMsgTemplate);
                });
            }
        });
        //开始进行用户好友的回话
    });
</script>
</body>
</html>